angular2/4 树形结构菜单示例

树型结构

组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss']
})
export class TreeComponent {

  // 超简单, 重点: 接收上级的值
  // 可以为树建立一个接口, 这里简化为any
  @Input() treelists: any

  // 点击动作
  itemClick(i) {
    // 建立一个服务来接收这个值, 或者借助双向绑定, 处理动作
    i._open = i._open  // 本例只简单演示开关, 借助 treelists本身实现
    console.log(i)
  }
}

模板内容

<ul>
  <li *ngFor="let item of treelists">
    <button md-button (click)="itemClick(item)">{{item.title}}</button>
    <!--调用组件本身并 传值给下级: [treelists]="item.items"-->
    <app-tree *ngIf="item._open && item.items && item.items.length" [treelists]="item.items"></app-tree>
  </li>
</ul>

以上树组件完成, 在其他组件中调用此组件即可

<app-tree [treelists]="menu"></app-tree>

数据/赋值

menu = [{
    title: '1',
    _open:true, //默认打开第一级
    items: [{
      title: '1.1',
      items: [
        {
          name: '1.1.1',
          title: 'xxx',
          items: []
        }
      ]
    }, {
      title: '1.2',
      items:[]
    }
    ]
  }]